<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>线性渐变</title>
</head>
<body>

<br />

<canvas id="canvas" style="border:1px solid #aaa; display:block; margin:10px auto;">
	当前浏览器不支持canvas, 请更换浏览器后再试
</canvas>
<script>

	window.onload = function(){
	
		var canvas = document.getElementById("canvas");
		
		canvas.width = 900;
		canvas.height = 700;
		
		var context = canvas.getContext("2d");
		
		var linearGrad = context.createLinearGradient( 0, 0, 900, 700);  //最后两个参数是改变渐变的位置
		linearGrad.addColorStop(0.0, 'white');
		linearGrad.addColorStop(0.25, 'yellow');
		linearGrad.addColorStop(0.5, 'green');
		linearGrad.addColorStop(0.75, 'blue');
		linearGrad.addColorStop(1.0, 'black');
		context.fillStyle = linearGrad;
		context.fillRect( 0, 0, 900, 700);
	
	}
	
</script>
</body>
</html>
